import { useSelector, useDispatch } from 'react-redux';
// 导入 action 生成函数
import { increment, decrement } from './store/actions/counter';

export const App = () => {
  // 读取 store 中的数据
  const state = useSelector((state) => state);
  console.log(state);
  // 修改 store 中的数据
  const dispatch = useDispatch();

  return (
    <div>
      <h2>我是项目的根组件</h2>
      <h3>我是从redux store中读入的数据{state.counter}</h3>
      <button
        onClick={() => {
          // 分发 action 修改数据
          const action = increment(6);
          dispatch(action);
        }}
      >
        增加
      </button>
      <button
        onClick={() => {
          // 分发 action 修改数据
          dispatch(decrement(3));
        }}
      >
        减少
      </button>
    </div>
  );
};
